<template>
	<view class="page">
		<unit-div :userMsg='userMsg'></unit-div>
		<div class="myUnit" style="padding: 0;position: sticky;top: 0;z-index: 10;">
			<u-tabs :list="tabList" :activeStyle="{ color: '#0275a1',fontWeight:'bold' }" @click="tabClick"
				:current='tabIndex' :lineColor="$u-primary" :scrollable='false'></u-tabs>
			</u-tabs>
			<div v-show="tabIndex==1">
				<search-div ref="searchDiv" placeholder='请输入工程名称' @search='search'></search-div>
			</div>
		</div>
		<div class="myUnit" v-show="tabIndex==0">
			<div style="display: flex;">
				<div class="menuDiv" v-for="item in list" @click="goNav(item)">
					<uni-icons :type="item.icon" size="30px" :color='item.color'></uni-icons>
					<div class="textDiv">
						<div class="text">{{item.num}}
							<span class="tipDiv">{{item.unit}}</span>
						</div>
						<div class="name">
							<div>{{item.name}}</div>
							<div class="rightIcon" v-if="item.name">
								<u-icon name="arrow-right" size='14' color='#999'></u-icon>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div style="display: flex;">
				<div class="menuDiv" v-for="item in list2" @click="goNav(item)">
					<uni-icons :type="item.icon" size="30px" :color='item.color'></uni-icons>
					<div class="textDiv">
						<div class="text">{{item.num}}<span class="tipDiv">{{item.unit}}</span></div>
						<div class="name">
							<div>
								{{item.name}}
							</div>
							<div class="rightIcon" v-if="item.name">
								<u-icon name="arrow-right" size='14' color='#999'></u-icon>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div v-show="tabIndex==1">
			<div class="myUnit" v-for="(item, index) in projectList" @click="goDetail(item)">
				<div class="unitTitle">
					{{index+1}}.{{item.engineName}}
					<u-icon name="arrow-right"></u-icon>
				</div>
				<div class="flexDiv">
					<div class="myText">
						<div class="dotDiv primaryTag"></div>
						<div>检测数量：</div>
						<div>{{item.detectionNumRate}}</div>
					</div>
					<div class="myText">
						<div class="dotDiv pinkTag"></div>
						<div>检测报告：</div>
						<div>{{item.reportNumRate}}</div>
					</div>
				</div>
			</div>
			<u-loadmore class='myLoadmore' :status="status" line />
		</div>
	</view>
</template>

<script>
	import {
		getCountMsg,
		listProject,
	} from "@/api/taskMng/index.js"
	export default {
		data() {
			return {
				status: 'loading',
				tabIndex: 0,
				userMsg: {
					nickName: '',
					deptName: ''
				},
				tabList: [{
					name: '数据总览',
				}, {
					name: '工程检测概况',
				}],
				list: [{
						name: '工程备案',
						num: 0,
						unit: '个',
						icon: 'map',
						color: '#795548',
						url: '/subPage/totalMng/projectTotal?flag=1'
					},
					{
						name: '检测设备',
						num: 0,
						unit: '个',
						icon: 'link',
						color: '#00BCD4',
						url: '/subPage/totalMng/deviceTotal?flag=1',

					}
				],
				list2: [{
						name: '检测人员',
						num: 0,
						unit: '个',
						icon: 'person',
						color: '#009688',
						url: '/subPage/totalMng/userTotal?flag=1',

					},
					{
						name: '归档报告',
						num: 0,
						unit: '份',
						icon: 'calendar',
						color: '#3F51B5',
						url: '/subPage/totalMng/reportTotal?flag=1',
					}
				],
				form: {
					engineName: '',
					pageNum: 1,
					pageSize: 1000
				},
				projectList: []
			}
		},
		methods: {
			show() {
				this.tabIndex = 0
				this.load()
				this.getList()
				let form = uni.getStorageSync('storage_data')
				this.userMsg.nickName = form.vuex_nickName
				this.userMsg.deptName = form.vuex_deptName
			},
			goDetail(row) {
				let req = '?id=' + row.engineId
				uni.navigateTo({
					url: '/subPage/dataMng/projectDetail' + req
				})
			},
			load() {
				getCountMsg().then(res => {
					let data = res.data
					this.list[0].num = data.engineTotal
					this.list[1].num = data.deviceTotal
					this.list2[0].num = data.userTotal
					this.list2[1].num = data.archiveReportTotal
				})
			},
			tabClick(e) {
				this.tabIndex = e.index
			},
			goNav(e) {
				if (e.url) {
					uni.navigateTo({
						url: e.url
					})
				}
			},
			search(e) {
				this.form.engineName = e
				this.form.pageNum = 1
				this.getList()
			},
			loadmore() {
				this.form.pageNum++;
				this.getList();
			},
			getList() {
				listProject(this.form).then(res => {
					let total = res.pageDetail.total
					let list = res.list
					if (this.form.pageNum == 1) {
						uni.pageScrollTo({
							scrollTop: 0
						})
						this.projectList = res.list;
					} else {
						this.projectList = this.projectList.concat(list);
					}
					if (this.form.pageNum * 10 >= total) {
						this.status = 'nomore'
					} else {
						this.status = 'loadmore'
					}
				}).catch(e => {
					this.status = 'nomore'
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.flexDiv {
		display: flex;
		justify-content: space-between;
	}

	.myText {
		align-items: center;
	}

	.myText div:nth-child(2) {
		color: #333
	}

	.myText div:nth-child(3) {
		color: #666
	}

	.dotDiv {
		width: 10px;
		height: 10px;
		border-radius: 20px;
		margin: 0 10px;
	}

	.primaryTag {
		background: $u-primary;
	}

	.pinkTag {
		background: #009688;
	}

	.numTag {
		position: absolute;
		top: 0;
		right: 0;
	}

	.menuDiv {
		flex: 1;
		height: 60px;
		background: #f3f4f5;
		display: flex;
		align-items: center;
		margin: 5px;
		border-radius: 10px;
		justify-content: space-evenly;
	}

	.textDiv {
		text-align: center;
	}

	.name {
		display: flex;
		align-items: center;
	}

	.text {
		font-size: 20px;
		color: $u-primary;
	}

	.tipDiv {
		font-size: 13px;
		margin-left: 3px;
	}

	.rightIcon {
		margin-left: 10px;
	}
</style>